<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
// @ts-ignore
import HeaderImporter from './HeaderImporter.vue'

defineProps<{ isChanged: boolean; isEditing?: boolean; isFlightPanel?: boolean }>()
defineEmits<{
  (e: 'save'): void
  (e: 'goback'): void
  (e: 'toggle'): void
  (e: 'export-common-kml'): void
  (e: 'export-flight-kml'): void
  (e: 'export-dji-kmz'): void
  (e: 'open-flight-params'): void
}>()
</script>

<template>
  <div class="header-box">
    <div class="title-actions">
      <template v-if="isEditing">
        <a-button v-if="!isChanged" disabled>保存</a-button>
        <a-button v-else type="primary" @click="$emit('save')">保存</a-button>
        <div class="divider"></div>
        <a-button @click="$emit('toggle')">退出编辑</a-button>
        <div class="divider"></div>
        <a-button @click="$emit('export-common-kml')">导出通用KML</a-button>
        <div class="divider"></div>
        <a-button @click="$emit('export-flight-kml')">导出飞控KML</a-button>
        <div class="divider"></div>
        <a-button @click="$emit('export-dji-kmz')">导出大疆KMZ</a-button>
        <div class="divider"></div>
        <a-button @click="$emit('open-flight-params')">{{ isFlightPanel ? '大疆参数' : '飞控参数' }}</a-button>
        <div class="divider"></div>
      </template>
      <HeaderImporter />
    </div>
    <span>航线编辑器 - 航点航线</span>
  </div>
  
</template>

<style scoped>
.header-box {
  position: relative;
  display: flex;
  align-items: center;
  box-shadow: inset 0 -1px 0 0 #4f4f4f;
  justify-content: center;
  width: 100%;
  height: 48px;
  background-color: #232323;
  z-index: 9;
  color: #fff;
}
.title-actions {
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 16px;
  height: 100%;
  display: flex;
  align-items: center;
}
.divider {
  background: #4f4f4f;
  width: 1px;
  height: 19px;
  margin: auto 16px;
}
</style>


